<template>
    <view class="page">
        <map class="map" :latitude="lat" :longitude="lng" :markers="markers"></map>
    </view>
</template>

<script>
    import {mapState} from "vuex";
    export default {
        name: "business-map",
        data(){
            return {
                lat:"",
                lng:"",
                markers:[
                    {
                         id:1,
                         longitude:0,//图标的经度
                         latitude:0, //图标的纬度
                         width:30,
                         height:30,
                         iconPath:"/static/images/business_map/map_pos.png",
                         callout:{
                             fontSize:14,
                             content:"",
                             bgColor:'#FFFFFF',
                             padding:8,
                             borderWidth:1,
                             borderColor:"#CCCCCC",
                             borderRadius:4,
                             display:"ALWAYS"
                         }
                    }
                   

                ]
            }
        },
        onLoad(opts){
            //分店的id
            this.branch_shop_id=opts.branch_shop_id?opts.branch_shop_id:"";
            //经度
            this.lng=opts.lng?opts.lng:"";
            //纬度
            this.lat=opts.lat?opts.lat:"";
            this.markers[0].longitude=this.lng;
            this.markers[0].latitude=this.lat;
            //文本内容
            this.markers[0].callout.content=this.shopInfo.branch_shop_name+"\r\n"+this.shopInfo.address;
        },
        computed:{
            ...mapState({
                shopInfo:state=>state.business.shopInfo
            })
        }
    }
</script>

<style scoped>
    .page{width:100%;height:100vh;overflow:hidden;}
    .map{width:100%;height:100%;}
</style>
